body{
    background-color: aliceblue;
}

#img1{
     clip-path: circle(40%);
     width: 50%;
     height: 50%;
}

#img2{
    clip-path: circle(40% at left);
     width: 300px;
     height: 300px;
}

#img3{
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
  width: 300px;
     height: 300px;
}

div.sii{
  border: 1px solid green;
  padding: 10px;
}

#img4 {
  clip-path: ellipse(20% 35%);
}

#img5 {
  clip-path: ellipse(20% 35% at top);
}

#img6{
 float: left;
  clip-path: ellipse(40% 50%);
  shape-outside: ellipse(45% 50%);
}

div.sii1{
  border: 1px solid green;
  padding: 10px;
}

#img7{
     clip-path: polygon(50% 10%, 100% 50%, 50% 100%, 0% 50%);
      width: 300px;
     height: 300px;
}